<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="renderer" content="webkit"/>
<meta name="force-rendering" content="webkit"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="report" content='{"pid": "blog", "spm":"1001.2101"}'>
<meta name="referrer" content="always">

<meta http-equiv="Cache-Control" content="no-siteapp" /><link rel="alternate" media="handheld" href="#" />
<meta name="shenma-site-verification" content="5a59773ab8077d4a62bf469ab966a63b_1497598848">
<title>移动端HTML文档（富文本）编辑器 - Zx-Editor</title>
<meta name="keyword" content="Zx-Editor,html-editor,editor">
<meta name="description" content="移动端HTML文档（富文本）编辑器，支持图文混排、引用、大标题、无序列表，字体颜色、加粗、斜体。">
<link rel="stylesheet" href="./css/index.css">
<style type="text/css">
.header-wrapper{background-color: #fff;border-bottom: 1px solid #e5e5e5;height: 50px;position: relative;width: 100%;}
.header-wrapper .left-btn {position: absolute;left: 0;top: 0;z-index: 2;}
.header-wrapper .left-btn img{width: 25px;height: auto;}
.header-wrapper .center-btn {text-align: center;position: relative;}
.header-wrapper .right-btn {position: absolute;right: 0;top: 0;text-align: right;}
.header_title{font-weight: normal;color: #5f5f5f;line-height: 50px;font-size: 0.6rem;}

.cover-wrapper{margin-top: 0;background: #3e3e3e;}
.cover-wrapper .cover{min-height: 200px;}
.cover-wrapper .cover:after{background: url(./img/icon-video@3x.png) no-repeat 0 0;-webkit-background-size: auto 20px;background-size: auto 20px;content: '添加视频'}
.border-bm{ border-bottom:1px dashed #eeeeee; }
.title-wrapper .placeholder{ font-size:18px; }
.title-wrapper .input-hook{ font-size:18px;  }
article{display: none;}
video{width: 100%;height: auto;}
</style>
</head>
<body>
<div class="container"> 
    <section class="header-wrapper">
        <div class="left-btn">
            <div style="padding:15px 0px 0px 10px">
                <a onclick="javascript:void(0);"><img src="./img/back@2x.png"></a> 
            </div>
        </div>
        <div class="center-btn">
            <span class="header_title">视频</span>
        </div>
        <div class="right-btn">
            <div style="padding:15px 15px 0px 0px">
                <a href="javascript:handleSubmitClick();" style="font-size:18px;color:#FFB74F;text-decoration: none;">发布</a>
            </div>
        </div>
    </section>
    <section class="cover-wrapper">
        <div class="cover"><img src=""></div>
        <input type="file" accept="video/*" style="display: none">
    </section>
    <!--标题-->
    <section class="title-wrapper border-bm">
        <div class="item placeholder"><span>请输入标题...</span></div>
        <div class="item input-hook" contenteditable="true" style="display: none;"></div>
    </section>
    <!--导语、摘要-->
    <section class="summary-wrapper border-bm">
        <div class="item placeholder">输入摘要，140字内（非必填）</div>
        <div class="item input-hook" contenteditable="true" style="display: none;"></div>
    </section>
    <article>
        <div class="zx-eidtor-container" id="editorContainer"></div>
    </article>
</div>
</body>
</html>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/mobile-detect/1.4.5/mobile-detect.min.js"></script>
<script type="text/javascript">

Array.prototype.contains = function(needle) {
    for (i in this) {
        if (this[i].indexOf(needle) > 0)
    return i;
    }
    return -1;
}
var device_type = navigator.userAgent; //获取userAgent信息
var md = new MobileDetect(device_type); //初始化mobile-detect
var os = md.os(); //获取系统
console.log(device_type);
// 获取body元素
var $docBody = $('body');
// 封面图元素
var $coverPic = $('.cover-wrapper img');

var $uploadFlg = $('.upload-wrap video');

var formFile = new FormData();

// 标题summary是否显示
// var summaryShow = false;
// 标题栏子元素集（.placeholder, .input-hook）
var $titleItems = null;
// 摘要，导语栏子元素集（.placeholder, .input-hook）
var $summaryItems = null;

// 封面图栏
handleCoverWrapper();
// 标题栏
handlePlaceholderInputWrapper('.title-wrapper');
// 导语摘要栏
handlePlaceholderInputWrapper('.summary-wrapper');

/*let video =document.createElement("video");
// video.setAttribute('controls','controls')
video.setAttribute('x5-video-player-type','h5-page')
video.setAttribute('playsinline',true)
video.setAttribute('webkit-playsinline',true)
video.setAttribute('preload',true)
video.setAttribute('crossOrigin', 'anonymous');
// 封面容器
var $cover = $('.cover-wrapper .cover');
var $input = $('.cover-wrapper input');
var $img = $('.cover-wrapper .cover img');

// 点击封面容器处理
$cover.on('click', function (e) {
    $input.click();
});

$input.on('change', function (e) {
    var files = this.files;
    // console.log(files)
    if(files && files[0]) {
        // document.body.appendChild(video)
        var videoUrl= window.URL.createObjectURL(files[0]);
        // var videoUrl= window.URL.createObjectURL(this.files[0]);
        // $('video').html('<source src="'+videoUrl+'" type="video/ogg"><source src="'+videoUrl+'" type="video/mp4">')
        // video.setAttribute('crossOrigin', 'anonymous');//处理跨域
        video.setAttribute('src', videoUrl);
        // videoCutOutImg(videoUrl)
        $cover.html(video);
        $cover.addClass('has-pic', $cover);

        // setTimeout(function() {
        //     createIMG(files[0].name.split('.')[0]+'.png');
        // }, 500);
    }
    
}).trigger('change');
function createIMG(name) {
        var imgHeight = 0,
        imgWidth = 0,
        videoWidth = 0,
        videoHeight = 0;
        canvas = document.createElement("canvas");
        
        //获取展示的video宽高作为画布的宽高和临时视频截图的宽高
        // canvas.width = imgWidth = video.offsetWidth;
        // canvas.height = imgHeight = video.offsetHeight;
        //获取实际视频的宽高，相当于视频分辨率吧
        // videoWidth = video.videoWidth;
        // videoHeight = video.videoHeight;
        canvas.width = video.videoWidth * 0.5;
        canvas.height = video.videoHeight * 0.5;//设定宽高比
        canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
        // canvas.getContext("2d").drawImage(video, 0, 0, videoWidth, videoHeight, 0, 0, imgWidth, imgHeight);
        var dataUrl = canvas.toDataURL('image/png').replace('image/png', 'image/octet-stream');
        console.log(dataUrl);
        // alert(dataUrl)
        $img.attr('src',dataUrl);
        $cover.addClass('has-pic', $cover);
}*/
/*function videoCutOutImg (url, frames = 5) {
  // let video = document.createElement('video')
  let slide = 0.5
  video.crossOrigin = 'anonymous'
  video.setAttribute('src', url)
  video.currentTime = frames // 帧数，取5帧吧，第一帧可能会是黑色，帧数自定义取
  return new Promise((resolve, reject) => {
    video.addEventListener('loadeddata', function () {
      let canvas = document.createElement('canvas')
      canvas.width = video.videoWidth * slide
      canvas.height = video.videoHeight * slide
      canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height)
      // resolve(canvas.toDataURL('image/png'))
      var dataUrl = canvas.toDataURL('image/png').replace('image/png', 'image/octet-stream');
        console.log(dataUrl);
        $img.attr('src',dataUrl);
        $cover.addClass('has-pic', $cover);
      
    })
  })
}*/
function handleSubmitClick () {
    console.log()
}
/**
 * *********************************
 * 封面图
 * *********************************
 */
function handleCoverWrapper () {
    let video = document.createElement("video");
    video.setAttribute('x5-video-player-type','h5-page')
    video.setAttribute('playsinline',true)
    video.setAttribute('webkit-playsinline',true)
    video.setAttribute('preload',true)

    var $cover = $('.cover-wrapper .cover');
    var $upload = $('.upload-wrap');
    var $input = $('.cover-wrapper input');
    // var $img = $($cover).hasClass('img');
    // console.log($img)
    // 点击封面容器处理
    $($cover).bind('click', function (e) {
        $input.click();
    });

    // 选中图片文件
    $($input).bind('change', function (e) {
        var files = this.files;
        console.log(files)
        if(files && files[0]) {}
    })
}

function videoCutOutImg (url, frames = 5) {}
/**
 * *********************************
 * 标题容器
 * *********************************
 */
/**
 * 处理标题、摘要placeholder/input切换
 */
function handlePlaceholderInputWrapper (selector) {
  var $wrapper = $(selector);
  var $items = $($wrapper).find('.item');
  // 输入最大长度
  var maxLength = 30;
  if ($items.length === 0) return;
  if (selector === '.title-wrapper') {
    $titleItems = $items;
  } else if (selector === '.summary-wrapper') {
    $summaryItems = $items;
    maxLength = 140;
  }
  $($items[0]).bind('click', _placeholderClikHandler);
  // zxEditor.addEvent($items[1], 'blur', _inputHookHandler, false)
  $($items[1]).bind('blur', _inputHookHandler);
  // 输入内容限制
  // zxEditor.addEvent($items[1], 'keyup', function (e) {
  $($items[1]).bind('keyup', function(e){
    var text = this.innerText;
    if (text && text.length >= maxLength) {
      if (e.keyCode !== 8) {
        e.preventDefault();
      } else {
        this.innerText = text.substr(0, maxLength);
      }
    }
  })
}

/**
 * 点击标题、摘要placeholder处理程序
 * @private
 */
function _placeholderClikHandler (e) {
  var $currentElm = e.currentTarget;
  if ($($currentElm).hasClass('placeholder')) {
    this.style.display = 'none';
    var $inputHook;
    if ($currentElm === $titleItems[0]) {
      $inputHook = $titleItems[1];
    } else if ($currentElm === $summaryItems[0]) {
      $inputHook = $summaryItems[1];
    }
    if (!$inputHook) return;
    $inputHook.style.display = '';
    $inputHook.focus();
  }
}

/**
 * 点击标题、摘要输入框处理程序
 * @private
 */
function _inputHookHandler (e) {
  var $currentElm = e.currentTarget;
  var $placeholder;
  if ($currentElm === $titleItems[1]) {
    $placeholder = $titleItems[0];
  } else if ($currentElm === $summaryItems[1]) {
    $placeholder = $summaryItems[0];
  }
  if (!$placeholder) return;
  var text = $currentElm.innerText;
  if (!text) {
    $placeholder.style.display = '';
    $currentElm.style.display = 'none';
  }
}
</script>